<template>
	<div>
		<div class="header">
			<van-cell size="large">
				<div slot="icon" class="iconko">
					<van-icon name="arrow-left" @click="myzj" />
				</div>
				<div slot="title" class="cellbox" @click="myzj">我的收藏</div>
			</van-cell>
		</div>
		<div style="height: 50px;"></div>
		<div class="shouchang" v-for="(item,index) in objArr" :key="index">
			<van-cell>
				<div slot="icon" class="iconImg">
					<img :src="item.image" />
				</div>
				<div slot="title" class="biaot">{{item.title}}
					<span>￥299.00</span>
					<van-button type="primary" size="small" class="btn" color="#343434" @click="delshouc(item.id,index)">删除收藏</van-button>
				</div>
			</van-cell>
		</div>
	</div>
</template>

<script>
	import {
		Cell,
		CellGroup,
		Button,
		Dialog 
	} from 'vant';
	import {
		Icon
	} from 'vant';
	export default {
		data() {
			return {
				favoArr: [],
				slts: [],
				objArr: [],
				idxArr: [],
				idx: ''

			}
		},
		created() {
			this.getFavo()
		},
		methods: {
			myzj() {
				this.$router.go(-1)
			},
			// 请求收藏
			getFavo() {
				let obs = null
				this.$axios.get('http://116.63.80.218/products/wishlist', {
					params: {
						userid: this.$store.state.nameId.userid
					}
				}).then(res => {
					console.log(res)
					this.idxArr = res.data
					if (res.status = 200) {
						for (let i = 0; i < res.data.length; i++) {
							this.favoArr.push(res.data[i])
						}
						// 请求详情数据
						for (let i = 0; i < this.favoArr.length; i++) {
							this.$axios.get('http://116.63.80.218/products/info', {
								params: {
									productId: this.favoArr[i].product_id
								}
							}).then(res => {
								console.log(res.data.product)
								for (let i = 0; i < res.data.product.length; i++) {
									if (this.objArr.indexOf(res.data.product[i]) == -1) {
										this.objArr.push(res.data.product[i])
									}
								}
							})
						}
					}
					console.log(this.favoArr[0].id)
				}).catch(err => {
					console.log(err)
				})
			},
			// 删除收藏
			delshouc(ids,index) {
				// console.log(id) 
				// console.log(ids)
				Dialog.confirm({
				  title: '移除收藏',
				  message: '确认移除收藏吗？',
				})
				  .then(() => {
				    for (let j = 0; j < this.idxArr.length; j++) {
				    	console.log(this.idxArr[j])
				    	if (this.idxArr[j].product_id == ids) {
				    		this.idx = this.idxArr[j].id
				    	}
				    }
				    this.$axios.get('http://116.63.80.218/products/remove/wishlist', {
				    	params: {
				    		userId: this.$store.state.nameId.userid,
				    		wishlisId: this.idx
				    	}
				    }).then(res => {
				    	console.log(res)
				    	this.objArr.splice(index, 1)
				    })
				  })
				  .catch(() => {
				    // on cancel
				  });
				
				
			
			}

		},
		components: {
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Icon.name]: Icon,
			[Button.name]: Button,
			[Dialog .name]: Dialog ,
		},
	}
</script>

<style lang="less" scoped>
	.header .van-cell {
		box-shadow: 0 1px 1px rgba(100, 100, 100, 0.2);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		margin-bottom: 100px;

		.cellbox {
			font-size: 15px;

		}

		.iconko {
			font-size: 20px;
			margin-right: 20px;
		}
	}

	.shouchang {
		margin-top: 10px;
		display: flex;
		height: 120px;

		.iconImg {
			width: 110px;
			margin-right: 20px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.biaot {
			height: 110px;
			font-size: 16px;
			font-weight: bold;

			>span {
				margin-top: 10px;
				display: block;
				color: #A8896D;
			}

			.btn {
				height: 30px;
				position: absolute;
				right: 20px;
				bottom: 20px;
			}
		}
	}
</style>
